<template>
	<view class="container">		
<!-- 		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：4444</text>
		<uni-link :href="href" :text="href"></uni-link> -->
		<!-- <FormCustorm></FormCustorm> -->
		<!-- <button type="primary" @click="get">查询前10条数据</button> -->
		<view class="uni-padding-wrap uni-common-mt">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll">
				<view class="scroll-view-item" v-for="userInfo in userInfoList">
					<view class="scroll-view-item">
						<uni-card :cover="userInfo.images[0]"  @click="onClick">
							<view class="userInfoBox">
								<view class="userInfoRow">
									现居{{userInfo.currentPlace}} . {{userInfo.birthdayPlace}}
								</view>	
								<view class="userInfoRow">
									{{userInfo.birthday}} . 160cm . 本科 . 前端
								</view>
							</view>
						</uni-card>
					</view>
				</view>
			<!-- <view id="demo1" class="scroll-view-item uni-bg-red">A</view> -->
<!-- 				<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
				<view id="demo3" class="scroll-view-item uni-bg-blue">C</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import FormCustorm from "./form.vue"
	export default {
		// components: {
		// 	FormCustorm
		// },
		onShow() {
			console.log("index show, get remote info")
			this.get()
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				userInfoList: [
					{
						currentPlace: "安阳",
						birthdayPlace: "北京",
						birthday: "13",
						images: [
							"https://mp-213a0b45-eca2-42e1-932d-14d8f17a1a7b.cdn.bspapp.com/11.PNG"
						]
					},
					{
						currentPlace: "鹤壁",
						birthdayPlace: "北京",
						birthday: "13",
						images: [
							"https://mp-213a0b45-eca2-42e1-932d-14d8f17a1a7b.cdn.bspapp.com/11.PNG"
						]
					}
				],
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {
			onClick(e) {
				console.log(e)
			},
			upper: function(e) {
				// console.log(e)
			},lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			async get() {
				uni.showLoading({
					title: '处理中...'
				})
				return await uniCloud.callFunction({
					name: 'testget',
					// data: {
					// 	name : this.userInfo.name
					// }
				}).then((res) => {
					uni.hideLoading()
					// uni.showModal({
					// 	content: `查询成功，获取数据列表为：${JSON.stringify(res.result.data)}`,
					// 	showCancel: false
					// })
					// console.log(res)
					this.userInfoList = res.result.data
					console.log(this.userInfoList)
					return res.result.data
				}).catch((err) => {
					uni.hideLoading()
					// uni.showModal({
					// 	content: `查询失败，错误信息为：${err.message}`,
					// 	showCancel: false
					// })
					console.error(err)
				})
			},
		}
	}
</script>

<style>
	.container {
		padding: 0px;
		font-size: 14px;
		line-height: 1px;
	}
	
	.scroll-view-item {
		height: 600rpx;
		/* line-height: 300rpx; */
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	
	.userInfoBox {
		display: flex;
		flex-direction: column;
	}
	
	.userInfoRow {
		justify-content: flex-start;
		display: flex;
		flex-direction: row;
		padding: 3px 0;
	}
	
	.userInfoItemColumn {
		flex: 1;
		float: left;
	}
</style>
